<template>
  <div style="margin: 0 100px;">
    <div class="title">资产拍卖登记</div>
    <el-form label-width="100px" :model="ruleForm" :rules="rules" ref="form" class="form">
        <div class="title">基础信息</div>
        <div style="border: 1px solid rgb(220, 220, 220); width: 100%; margin: 10px 0;"></div>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="资产类别" prop="zclb">
                    <el-select v-model="zclb" class="input" placeholder="请选择资产类别"></el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="资产所在地" prop="zcszd">
                    <el-select v-model="ruleForm.zcszd" class="input" placeholder="请选择省份"></el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item prop="zcszd2" label-width="-100px">
                    <el-select v-model="zcszd2" class="input" placeholder="请选择市区"></el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="卖家所在地" prop="mjszd">
                    <el-select v-model="ruleForm.mjszd" class="input" placeholder="请选择省份"></el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item prop="mjszd2" label-width="-100px">
                    <el-select v-model="mjszd2" class="input" placeholder="请选择市区"></el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="资产描述" prop="zcms">
                    <el-input type="textarea" v-model="ruleForm.zcms" class="input" placeholder="描述一下资产相关信息"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item>
                    <el-upload
                    class="avatar-uploader"
                    action="/api2/registrations/addPicture"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="ruleForm.picture" :src="ruleForm.picture" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-col>
        </el-row>
        
        <div class="title">联系方式</div>
        <div style="border: 1px solid rgb(220, 220, 220); width: 100%; margin: 10px 0;"></div>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="卖家姓名" prop="name">
                    <el-input v-model="ruleForm.name" class="input"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="ruleForm.phone" class="input"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="email" class="input"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item >
                    <el-button type="primary" style="margin-left: -100px;" @click="sendYzm">点击获取验证码</el-button>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="邮箱验证码" prop="yzm">
                    <el-input v-model="ruleForm.yzm" class="input"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item>
                    <el-checkbox v-model="check" class="input">所填写的资产信息真实准确，且有真实处置意愿</el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>
        
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item>
                    <el-button type="danger" @click="submit">提交</el-button>
                </el-form-item>
                
            </el-col>
        </el-row>

    </el-form>
  </div>
</template>

<script>
import {add,send} from '@/api/assetAuction/assetAuction';
export default {
    data(){
        return{
            ruleForm:{
                // zclb: '',
                zcszd: '',
                mjszd: '',
                zcms: '',
                name: '',
                phone: '',
                zym: null,
                phoneyzm: null,
                picture: null,

            },
            rules:
            {
                
            },
            zclb: '',
            imageUrl: '',
            zcszd2: '',
            mjszd2: '',
            email: '',
            check: false,
        }
    },
    methods: {
        handleAvatarSuccess(file) {
            console.log(file);
            this.ruleForm.picture = file.data;
        },
        sendYzm(){
            send(this.email).then((res) => {
                if(res){
                    this.$message.success('验证码已发送');
                    console.log(res);
                }
            })
        },
        submit(){
            if(this.check){
                add(this.ruleForm).then((res) => {
                    if(res){
                        this.$message.success('提交成功！');
                    }
                });
            }
            else{
                this.$message.warning('提交失败！');
            }
        }
    },
    mounted(){

    }
}
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.title{
    text-align: center;
    font-size: 24px;
}
.form{
    margin: 50px 100px 0 100px;
}
.form .title{
    font-size: 18px;
    color: #444;
    text-align: left;
    margin: 10px 0;
}
</style>